/*
 * @Author: your name
 * @Date: 2021-11-24 14:07:17
 * @LastEditTime: 2021-11-24 15:36:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-instruction-life-cycle\src\Vue.js
 */
import Compiler from "./Compiler"
import observe from './response/obseve'
import Watcher from './response/Watcher'
/** vue类构建 */
export default class Vue {
    constructor(options) {
        // 把参数 options 对象存为 $options
        this.$options = options
        // 数据
        this._data = options.data || undefined
        // 数据变为响应式的
        observe(this._data);
        // 将响应式的数据绑定到实例上
        this._initData()
        // 执行数据监听 - whatch
        this._initWatch()
        // 模板编译
        new Compiler(options.el, this)
        // 生命周期 create() 执行位置
        this.$options.create ?.()
    }

    /** 将响应式的数据绑定到实例上 */
    _initData() {
        var self = this
        Object.keys(this._data).forEach(key => {
            Object.defineProperty(self, key, {
                get() {
                    return self._data[key]
                },
                set(newVal) {
                    self._data[key] = newVal
                }
            })
        })
    }

    _initWatch() {
        var self = this
        var watch = this.$options ?.watch
        // if (!watch) return
        Object.keys(this._data).forEach(key => {
            new Watcher(self, key, watch ?.[key])
        })
    }

}